<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>

<body>
    <div id="app">
        <!-- 限制在 `<input>、<select>、<textarea>、components`中使用 -->
        <!-- radio -->
        <div>
            <input type="radio" name="test" v-model="redioModel" value="1">
            <input type="radio" name="test" @change="redioChange" v-model="redioModel" value="2">
        </div>
        <!-- checkbox -->
        <div>
            <input type="checkbox" value="1" v-model="checkboxVal">
            <input type="checkbox" value="2" v-model="checkboxVal">
            <input type="checkbox" value="3" @change="checkboxChange">
        </div>
        <!-- select -->
        <div>
            <!-- 使用 @change="selectChange" 替代v-model效果一样-->
            <select id="select" v-model="selectVal">
                <option value>请选择</option>
                <option value="1">test1</option>
                <option value="2">test2</option>
                <option value="3">test3</option>
                <option value="4">test4</option>
            </select>
        </div>
        <div></div>

        <div>{{msg}}</div>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue !',
                redioModel: '2', // 默认选中第一个
                checkboxVal: [],
                selectVal: ''
            },
            methods: {
                // radio
                redioChange(e) {
                    this.redioModel = e.target.value
                },
                // checkbox
                checkboxChange(e) {
                    const checked = e.target.checked
                    if (checked) {
                        this.checkboxVal.push(e.target.value)
                    } else {
                        const index = this.checkboxVal.findIndex(
                            item => item === e.target.value
                        )
                        this.checkboxVal.splice(index, 1)
                    }
                },
                // 在select上和 v-model效果一样
                selectChange(e) {
                    this.selectVal = e.target.value
                }
            }
        });
    </script>
</body>

</html>